<script setup lang="ts">
import { cardDeleteCardApi, cardGetCardListDataApi } from '@/apis/card'
import type { CardListItem, CardListParams } from '@/types/card.d.ts'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { id } from 'element-plus/es/locales.mjs'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 请求参数
let params = ref<CardListParams>({
  page: 1,
  pageSize: 8,
  carNumber: '',
  personName: '',
  cardStatus: '',
})
// 月卡信息列表
let cardList = ref<CardListItem[]>([])
// 总条数
let total = ref(0)
// 获取月卡信息列表 和 总条数
const getCardListData = async () => {
  const res = await cardGetCardListDataApi(params.value)
  cardList.value = res.rows
  total.value = res.total
}
getCardListData()

// 页码改变时
const changePage = (newPage: number) => {
  params.value.page = newPage
  getCardListData()
}
// 页码改变时
const changeSize = (newSize: number) => {
  params.value.pageSize = newSize
  getCardListData()
}
// 点击查询按钮
const onSearch = () => {
  params.value.page = 1
  getCardListData()
}
// 删除月卡
const onDelCard = async (id: string) => {
  await ElMessageBox.confirm('您确定删除该月卡吗?', '', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
  await cardDeleteCardApi(id)
  ElMessage.success('删除成功')

  if (cardList.value.length === 1 && params.value.page > 1) {
    params.value.page--
  }

  getCardListData()
}
// 批量删除月卡
let ids = ''
// 选项框状态改变时
const handleSelectionChange = (val: CardListItem[]) => {
  if (val.length > 0) {
    ids = val.map((item) => item.id).join(',')
  }
}
// 批量删除点击事件
const onDelCardList = async () => {
  await ElMessageBox.confirm('您确定删除选中的所有月卡吗?', '', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
  await cardDeleteCardApi(ids)
  ElMessage.success('删除成功')

  if (
    ids.split(',').length === cardList.value.length &&
    params.value.page > 1
  ) {
    params.value.page--
  }
  getCardListData()
}
</script>

<template>
  <div class="card-container">
    <!-- 搜索区域 -->
    <el-form :inline="true" :model="params" class="search-container">
      <el-form-item label="车牌号码:">
        <el-input
          class="search-main"
          v-model="params.carNumber"
          placeholder="请输入内容"
          clearable
        />
      </el-form-item>
      <el-form-item label="车主姓名:">
        <el-input
          class="search-main"
          v-model="params.personName"
          placeholder="请输入内容"
          clearable
        />
      </el-form-item>
      <el-form-item label="状态:">
        <el-select
          v-model="params.cardStatus"
          placeholder="请选择状态"
          clearable
          style="width: 240px"
        >
          <el-option label="可用" value="0" />
          <el-option label="已过期" value="1" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 添加删除按钮 -->
    <div class="create-container">
      <el-button type="primary" @click="router.push('/parking/card/add')"
        >添加月卡</el-button
      >
      <el-button @click="onDelCardList">批量删除</el-button>
    </div>
    <!-- 表格区域 -->
    <el-table
      :data="cardList"
      style="width: 100%; height: 400px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" width="100" label="序号" align="center" />
      <el-table-column prop="personName" label="车主名称" align="center" />
      <el-table-column prop="phoneNumber" label="联系方式" align="center" />
      <el-table-column prop="carNumber" label="车牌号码" align="center" />
      <el-table-column prop="carBrand" label="车辆品牌" align="center" />
      <el-table-column
        prop="totalEffectiveDate"
        label="剩余有效天数"
        align="center"
      />
      <el-table-column label="状态" align="center">
        <template v-slot="{ row }">
          <span>{{ row.cardStatus === 0 ? '可用' : '已过期' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template v-slot="{ row }">
          <el-button
            type="text"
            @click="
              $router.push({
                path: '/parking/card/add',
                query: { id: row.id, flag: 1 },
              })
            "
            >续费</el-button
          >
          <el-button
            type="text"
            @click="
              $router.push({
                path: '/parking/card/view',
                query: { id: row.id },
              })
            "
            >查看</el-button
          >
          <el-button
            type="text"
            @click="
              $router.push({ path: '/parking/card/add', query: { id: row.id } })
            "
            >编辑</el-button
          >
          <el-button type="text" @click="onDelCard(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <div class="page-container">
      <el-pagination
        v-model:current-page="params.page"
        layout="total, prev, pager, next, slot"
        :total="total"
        @current-change="changePage"
      >
        <el-select
          v-model="params.pageSize"
          @change="changeSize"
          style="width: 95px"
        >
          <el-option label="8条/页" :value="8" />
          <el-option label="10条/页" :value="10" />
          <el-option label="15条/页" :value="15" />
        </el-select>
      </el-pagination>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// 整个容器
.card-container {
  padding: 20px;
  background-color: #fff;
}
// 搜索区域
.search-container {
  border-bottom: 1px solid rgb(237, 237, 237, 0.9);
  margin-bottom: 20px;

  .search-main {
    width: 220px;
  }
}
// 添加删除按钮
.create-container {
  margin: 10px 0px;
}
// 表格容器
.el-table {
  ::v-deep(.el-table__header th) {
    background-color: rgb(237, 237, 237, 0.9);
    color: rgb(43, 37, 37);
    padding: 10px 0;
  }
}
// 分页区域
.page-container {
  margin: 10px 0px;
  display: flex;
  justify-content: end;
}
</style>
